<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#div1{width: 100px;height: 100px;background: red;position: absolute;right: 0;top: 0;}
</style>
<script>
window.onload= function(){
        var oDiv = document.getElementById('div1');
        var iTimer = null;
        var b =0;

        setTop();
        window.onscroll = function(){

            if(b != 1){
               clearInterval(iTimer);
            } 
            b = 2;

            setTop();
        }

        oDiv.onclick = function(){
            clearInterval(iTimer);
            var iCur = iSpeed = 0;

            iTimer = setInterval(function(){
                iCur = document.documentElement.scrollTop || document.body.scrollTop;

                iSpeed = Math.floor((0 - iCur) / 8);

                if(iCur == 0 ){
                    clearInterval(iTimer);
                }else{
                    document.documentElement.scrollTop =  document.body.scrollTop = iCur + iSpeed;
                }

                b = 1;


            },30)
        }

        function setTop(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            oDiv.style.top = scrollTop + document.documentElement.clientHeight - oDiv.offsetHeight
            + 'px';
        }
}

</script>
<title>运动</title>
</head>
<body style="height:2000px">
    <div id="div1">
        
    </div>
</body>
</html>